<template>
  <div class="home">
    <h1>{{ num }}</h1>
    <h1>{{ list }}</h1>

    <button @click="add(3)">num加加</button>
  </div>
</template>

<script lang="ts">
//@ts-ignore
import { defineComponent, ref, reactive, toRefs } from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

export default defineComponent({
  name: "HomeView",
  setup(props) {
    const num = ref<number>(10);
    //定义ref类型 用范型定义数据类型
    interface Idata {
      list: Array<number>;
      name: string;
    }
    //定义reactive的类型 因为是一个对象所以用接口定义

    const data = reactive<Idata>({
      list: [1, 2, 3],
      name: "xiaoming",
    });
    //reactive同样也是用 范型约束类型

    const add = (val: number): void => {
      num.value += val;
    };
    //函数可以约束参数和 返回值
    // 其他的跟vue3的写法一样
    return { num, ...toRefs(data), add };
  },
  components: {
    HelloWorld,
  },
});
</script>
